<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>修改密码</span>
      </div>
      <div>
        <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2"  size="small" label-width="100px" class="demo-ruleForm">
          <!--<el-row :gutter="5">-->
            <!--<el-col :span="12">-->
              <!--<el-form-item label="所属组织">-->
                <!--<el-input v-model="roles" :disabled="true"></el-input>-->
              <!--</el-form-item>-->
            <!--</el-col>-->
          <!--</el-row>-->
          <el-row :gutter="5">
            <el-col :span="18">
              <el-form-item label="">
                <span style="color: red">密码必须是至少8位的数字和英文字母组合</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="用户名称">
                <!--<span>{{name}}</span>-->
                <el-input v-model="name" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="输旧密码" prop="oldPassword">
                <el-input type="password" v-model="ruleForm2.oldPassword" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="输新密码" prop="pass">
                <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row :gutter="5">
          <el-col style="text-align: right;">
            <el-button class="filter-item" type="primary" @click="saveData">确认修改</el-button>
            <el-button class="filter-item" type="primary" @click="closeSelf">关 闭</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { updatePassWord } from '@/api/systemManage/userManagement'
export default {
  name: 'changePassword',
  computed: {
    ...mapGetters([
      'name',
      'roles',
      'userid'
    ])
  },
  data() {
    const validatePassd = (rule, value, callback) => {
      if (value.length < 8) {
        callback(new Error('密码不能小于8位'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm2.checkPass !== '') {
          this.$refs.ruleForm2.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      ruleForm2: {
        pass: '',
        checkPass: '',
        oldPassword: ''
      },
      rules2: {
        pass: [
          { validator: validatePass, trigger: 'blur' },
          { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)(?!([^(0-9a-zA-Z)]|[])+$)([^(0-9a-zA-Z)]|[]|[a-zA-Z]|[0-9]){6,}$/, message: '密码必须是至少8位的数字和英文字母组合', trigger: 'blur' },
          { validator: validatePassd, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' },
          { validator: validatePassd, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    closeSelf() {
      this.$router.go({ name: 'Dashboard' })
    },
    saveData() {
      this.$refs.ruleForm2.validate(valid => {
        if (valid) {
          let rasPw = this.$getRsaCode(this.ruleForm2.checkPass)
          let rasUn = this.$getRsaCode(this.ruleForm2.oldPassword)
          var data = {
            newPassword: encodeURIComponent(rasPw),
            oldPassword: encodeURIComponent(rasUn),
            userid: this.userid
          }
          updatePassWord(data).then((res) => {
            if (res.data.statusCode === 200) {
              this.$notify({
                title: '成功',
                message: '密码重置成功',
                type: 'success',
                duration: 1000
              })
            } else {
              this.$notify({
                title: '失败',
                message: res.data.message,
                type: 'error',
                duration: 1000
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
